import { useEffect, useState } from "react";
import { getTop5Api } from "../../http/module/Question";

const RightSidebar = () => {
  const [topQuestions, setTopQuestions] = useState([]);

  useEffect(() => {
    const fetchTopQuestions = async () => {
      try {
        const response = await getTop5Api();
        if (response.code === 200) {
          setTopQuestions(response.data);
        }
      } catch (error) {
        console.error("Error fetching top questions:", error);
      }
    };

    fetchTopQuestions();
  }, []);

  // 颜色配置数组用于前三个问题
  const colorClasses = [
    "bg-yellow-100 border-yellow-500",
    "bg-gray-100 border-blue-500",
    "bg-green-100 border-green-500",
  ];

  return (
    <aside className="hidden md:block w-1/5 p-5 bg-gray-50 h-screen rounded-md shadow-md mt-2">
      <h3 className="font-semibold text-xl mb-4">热门问题</h3>
      <ul className="space-y-2 mt-2">
        {topQuestions.map((question, index) => {
          return (
            <li
              key={question.id}
              className={`cursor-pointer py-2 px-3 rounded-lg transition-all border-l-4 ${
                index < 3
                  ? `${colorClasses[index]} hover:bg-opacity-75`
                  : "hover:bg-gray-200 border-transparent"
              }`}
            >
              <div className="flex flex-col">
                <span className="font-semibold line-clamp-2">
                  {index + 1}. {question.title}
                </span>

                <div className="flex flex-wrap mt-1 gap-1">
                  {question.tags?.map((tag) => (
                    <span
                      key={tag}
                      className="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full"
                    >
                      {tag}
                    </span>
                  ))}
                </div>

                <div className="mt-1 flex items-center justify-between">
                  <span className="text-xs text-gray-500">
                    用户ID: {question.userId}
                  </span>
                </div>
              </div>
            </li>
          );
        })}
      </ul>
    </aside>
  );
};

export default RightSidebar;
